<template>
  <!-- 经销商导入 -->
  <div  class="factory-assessment-box">
    <el-container class="factory-assessment-container">
      <!-- 搜索 -->
      <el-header height="auto">
        <Search
          ref="SearchForm"
          type="autocomplete"
          :data="indexSearchData"
          :submit-loading="submitLoading"
          @searchForm="searchForm"
          @resetForm="resetForm"
          @selectChange="focusForm" 
           @focuskey="focuskeyForm"
        />

      </el-header>
      <div class="action-button-box">
        <el-button plain style="margin-right: 10px" @click="toDelete">
          <m-iconfont classify="m-pc-public" icon="m-pc-public_shanc" /><span
            >删除</span
          ></el-button
        >
        <el-button
          type=""
          plain
          style="background:#2371C5;color:#ffffff;margin-right:10px"
          @click="importInventory"
          >导入库存
        </el-button>
        <el-button
          type=""
          plain
          style="color:#2371C5;margin-right:10px;border:none"
          @click="downloadTemplate"
          >下载模板
        </el-button>
      </div>
      <!-- 列表 -->
      <m-editable
        v-loading="tableLoading"
        style="margin: 0 20px"
        :data="dataList"
        height="400"
        :columns="columnsTable"
        @selection-change="handleSelectionChange"
      >
      <div slot-scope="scoped" slot="default-productName">
        {{scoped.row.productName.replace(' ', '&nbsp;')}} 
      </div>
        <template slot="default-action" slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click.stop="todeleteOne(scope.row)"
            >删除</el-button
          >
        </template>
      </m-editable>

      <!-- 分页模块 -->
      <el-pagination
        v-show="paging"
        class="pageBox"
        align="right"
        style="margin-top: 10px"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
      <import-inventory ref="upload" @done="reSearch" />
    </el-container>
  </div>
</template>
<script>
import {
  inquireDealerInventory, // 页面列表查询接口
  deleteDealerInventory, // 删除接口
  supplierSelect,
  dealerSelect,
  productLineSelect
} from '@api/m_mall_web_v1.js';
import { urlDownload } from '@const/utils';
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import ImportInventory from './ImportInventory';
import Search from './ImportInventory/m-search';
import { indexSearchData, columnsTable } from './index.const';
export default {
  name: 'DealerIM',
  components: {
    ImportInventory,Search
  },
  data() {
    return {
      toLead: {
        distributorOther: '',
        supplierOther: '',
        productLineOther: ''
      },
      dialogVisible: false,
      dialogShow: false,
      indexSearchData,
      searchData: {}, // 搜索数据
      submitLoading: false,
      index: '',
      curPage: 1,
      PAGE_NUMBER, //  页码
      PAGINATION_LAYOUT, // 分页功能
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0, // 总页数
      tableLoading: false,
      dataList: [],
      params: {},
      columnsTable,
      paging: true, // 分页显隐
      changeArrList: [], // 勾选的数据
      idList: [],
      deleteList: [],
      distributorName: '',
      productLineName: '',
      distributorId: '',
      supplierName: '',
      productLineCode: '',
      supplierCode: '',
      productName: '',
      dealerOptions: [], // 经销商
      supplierOptions: [], // 供应商
      productLineOptions: [] // 产品线
    };
  },

  created() {
    indexSearchData[0].attr.remoteMethod = this.getSupplier;
    indexSearchData[1].attr.remoteMethod = this.getProductLine;
    indexSearchData[2].attr.remoteMethod = this.getDealer;

  },
  mounted() {
    this.pointManagement();
    this.getSupplier();
    this.getProductLine();
    this.getDealer();
  },
  methods: {
    // 获取列表
    pointManagement() {
      this.$axios({
        url: inquireDealerInventory,
        method: 'post',
        data: {
          ...this.searchData,
          page: this.curPage,
          pageSize: this.pageSize
        }
      })
        .then(res => {
          console.log(res);
          this.dataList = res.data.payload.content || [];
          this.totalElements = res.data.payload.totalElements;
          if (this.totalElements === 0) {
            this.paging = false;
          } else {
            this.paging = true;
          }
        })
        .catch(err => {
          console.log(err);
          this.tableLoading = false;
        });
    },
    // 供应商
    // supplierNameg供应商
    // distributorName经销商
    getSupplier(e) {
  
      // debugger
      this.$axios({
        url: supplierSelect,
        method: 'post',
        data: {
          supplierName: e,
          page: this.curPage,
          pageSize: this.pageSize
        }
      })
        .then(res => {
          if (res.data.payload) {
            this.supplierOptions = res.data.payload.content;
            indexSearchData[0].options = res.data.payload.content.map(item => ({
              label: item.supplierName,
              value: item.supplierCode
            }));
          }
        })
        .catch(err => {});
    },
    // 产品线
    getProductLine(e) {
      console.log(this.supplierCode, 'code---')
      this.$axios({
        url: productLineSelect,
        method: 'post',
        data: {
          supplierCode: this.supplierCode,
          productLineName: e,
          page: this.curPage,
          pageSize: this.pageSize
        }
      })
        .then(res => {
          if (res.data.payload) {
            this.productLineOptions = res.data.payload.content;
            indexSearchData[1].options = res.data.payload.content.map(item => ({
              label: item.productLineName,
              value: item.productLineCode
            }));
          }
        })
        .catch(err => {});
    },
    // 经销商
    getDealer(e) {
      this.$axios({
        url: dealerSelect,
        method: 'post',
        data: {
          distributorName: e,
          supplierCode: this.supplierCode,
          productLineCode: this.productLineCode,
          page: this.curPage,
          pageSize: this.pageSize
        }
      })
        .then(res => {
          if (res.data.payload) {
            this.dealerOptions = res.data.payload.content;
            indexSearchData[2].options = res.data.payload.content.map(item => ({
              label: item.distributorName,
              value: item.distributorId
            }));
          }
        })
        .catch(err => {});
    },

    // 导入库存
    importInventory() {
      this.$refs.upload.show();
    },
    success(data) {
      this.payload = data; // 获取子组件传过来的参数
      // this.getSubmitBillVoucher()
    },
    // 下载模板
    downloadTemplate() {
      urlDownload(
       'https://mt.heng-tai.com.cn/guoke-channel-aggregation-center/api/v1/files/download/r8n83037jmyhri0ed9rzmc0h6ompzdoy.xls' 
      );
    },

    todeleteOne(row) {
      this.$mdialog({
        type: 'warning',
        message: '确认删除数据?',
        'confirm-text': '确定',
        'refuse-text': '取消'
      })
        .then(() => {
          let dataList = [];
          const list = [
            {
              id: row.id,
              orderDetailId: row.orderDetailId
            }
          ];
          dataList = {
            list
          };
          return dataList;
        })
        .then(dataList => {
          this.$axios({
            url: deleteDealerInventory,
            method: 'post',
            data: dataList
          }).then(res => {
            this.deleteList = res.data.payload.content || [];
            this.pointManagement();
            this.getSupplier();
            this.getProductLine();
            this.getDealer();
          });
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 勾选数据
    handleSelectionChange(val) {
      this.changeArrList = val;
      this.idList = this.changeArrList.map(item => item.id);
    },
    // 删除列表数据操作
    toDelete() {
      if (this.changeArrList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请勾选需要删除的数据!'
        });
      } else {
        this.toDeleteSingle();
      }
    },
    toDeleteSingle(value) {
      this.$mdialog({
        type: 'warning',
        message: '确认删除已勾选的数据?',
        'confirm-text': '确定',
        'refuse-text': '取消'
      })
        .then(() => {
          const list = this.changeArrList.map(item => ({
            id: item.id,
            orderDetailId: item.orderDetailId
          }));
          this.$axios({
            url: deleteDealerInventory,
            method: 'post',
            data: {
              list
            }
          }).then(res => {
            if (res.data.code === '0') {
              this.pointManagement();
              this.getSupplier();
              this.getProductLine();
              this.getDealer();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    reSearch() {
      this.curPage = 1;
      this.pointManagement();
      this.getSupplier();
      this.getProductLine();
      this.getDealer();
    },
    focusForm(item,selectkey){
      this[selectkey]=item
      this.getSupplier();
      this.getProductLine();
      this.getDealer();
    },
    focuskeyForm(key){
     if(key==='supplierCode'){
        this.getSupplier()
     }  if(key==='productLineCode'){
        this.getProductLine()
     }  if(key==='distributorId'){
        this.getDealer()
     }
    },
    // 搜索功能-点击查询
    searchForm(condition) {
      console.log(condition,'0000000'); 
      this.curPage = 1;
      // const params = {
      //   productLineCode: condition.productLineName,
      //   productName: condition.productName,
      //   distributorId: condition.distributorId,
      //   supplierCode: condition.supplierCode,
      // };
      this.searchData = condition;
      this.pointManagement();
    },
    // 点击重置
    resetForm(condition) {
      console.log(condition)
      this.curPage = 1;
      this.searchData = condition;
      this.supplierCode = ''
      this.productLineCode = ''
      this.distributorId = ''
      this.pointManagement();
      this.getSupplier();
      this.getProductLine();
      this.getDealer();
    },
    // 页码更改
    sizeChange(size) {
      this.curPage = 1;
      this.pageSize = size;
      this.pointManagement();
    },
    // 切换不一样的页面,重置一切数据
    pageChange(curPage) {
      this.curPage = 1;
      this.curPage = curPage;
      this.pointManagement();
    }
  }
};
</script>
<style lang="less" scoped>
.factory-assessment-box {
  margin: 0 0 10px 0 !important;
  .factory-assessment-container {
    height: 100%;
    overflow: auto;
    .action-button-box {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 12px;
      padding: 0 20px;
    }
    .pageBox {
      margin: 0 20px !important;
      padding: 7px 26px 6px 0;
      border: 1px solid @cutOffRuleColor;
      border-top: none;
      border-radius: 0 0 3px 3px;
    }
  }
  /deep/.m-editable .el-table .editable-header-cell-class {
    background: #f4f4f4 !important;
  }
  /deep/.gkSearchForm .filter-box .el-form-item__content div {
    width: 200px !important;
  }
  // /deep/.gkSearchForm .searchButtonList .more {
  //   border: none;
  // }
  // /deep/.gkSearchForm .searchButtonList .reset
  //  {
  //   padding: 0 17px 0 12px !important;
  // }
  // /deep/.gkSearchForm .searchButtonList .submit {
  //     padding: 0 19px 0 12px !important;

  // }
}
</style>
